<template>
  <div>
    <el-row>
      <el-col v-if="activeName === 'design'" :span="8" class="p-1" style="height: 200px;">
        <span>dataTreeJson(数据树json)</span>
        <el-input v-model="dataTreeJson" :autosize="{ minRows: 8, maxRows: 8}" type="textarea" />
      </el-col>
      <el-col v-if="activeName === 'render'" :span="5" class="p-1" style="height: 200px;">
        <span>singleDataJson(单数据json)</span>
        <el-input v-model="singleDataMapJson" :autosize="{ minRows: 8, maxRows: 8}" type="textarea" />
      </el-col>
      <el-col v-if="activeName === 'render'" :span="5" class="p-1" style="height: 200px;">
        <span>multipleDataArrayJson(多数据json)</span>
        <el-input v-model="multipleDataArrayJson" :autosize="{ minRows: 8, maxRows: 8}" type="textarea" />
      </el-col>
      <el-col :span="activeName ==='design' ? 10 : 8" class="p-1" style="height: 200px;">
        <span>tableJson(表格配置json)</span>
        <el-input v-model="tableJson" :autosize="{ minRows: 8, maxRows: 8}" type="textarea" />
      </el-col>
      <el-col :span="6" class="p-1" style="height: 200px;">
        <span>功能按钮</span>
        <div style="border:1px solid #C0C4CC;border-radius:5px;height:100%;" class="p-1">
          <div v-if="activeName ==='design'">组件初始化：<el-button type="info" size="mini" class="mb-1" @click="componentInit">componentInit</el-button></div>
          <div v-else-if="activeName ==='render'">表格初始化：<el-button type="info" size="mini" class="mb-1" @click="initTable">initTable</el-button></div>
          <div v-if="activeName ==='design'">获取表格JSON：<el-button type="info" size="mini" class="mb-1" @click="getTableJSON">getTableJSON</el-button></div>
          <div v-else-if="activeName ==='render'">渲染表格数据：<el-button type="info" size="mini" class="mb-1" @click="refreshData">refreshData</el-button></div>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" style="padding: 5px 10px">
      <el-tab-pane label="表格设计" name="design">
        <demo-design ref="design" />
      </el-tab-pane>
      <el-tab-pane label="表格渲染" name="render">
        <demo-render ref="render" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DemoDesign from '@/components/GeneralTable/demo/demoDesign'
import DemoRender from '@/components/GeneralTable/demo/demoRender'
export default {
  components: { DemoRender, DemoDesign },
  data() {
    return {
      activeName: 'design',
      singleDataMapJson: '{\n' +
          '\t"code1": [{\n' +
          '\t\t"code1&key1": "第一项内容"\n' +
          '\t}],\n' +
          '\t"code2": [{\n' +
          '\t\t"code2&key2": "第二项内容"\n' +
          '\t}]\n' +
          '}',
      multipleDataArrayJson: '[{\n' +
          '\t"code3&key3": "业务查房",\n' +
          '\t"code3&key4": "1",\n' +
          '\t"code3&key5": "1"\n' +
          '}, {\n' +
          '\t"code3&key3": "行政查房",\n' +
          '\t"code3&key4": "2",\n' +
          '\t"code3&key5": "2"\n' +
          '}, {\n' +
          '\t"code3&key3": "教学查房",\n' +
          '\t"code3&key4": "3",\n' +
          '\t"code3&key5": "3"\n' +
          '}]',
      dataTreeJson: '[{\n' +
          '\t"label": "单条数据",\n' +
          '\t"firstNode": true,\n' +
          '\t"children": [{\n' +
          '\t\t"label": "二级标题(单条)",\n' +
          '\t\t"resultType": 1,\n' +
          '\t\t"dataSetCode": "code1",\n' +
          '\t\t"key": "key1"\n' +
          '\t}, {\n' +
          '\t\t"label": "二级标题2(单条)",\n' +
          '\t\t"resultType": 1,\n' +
          '\t\t"dataSetCode": "code2",\n' +
          '\t\t"key": "key2"\n' +
          '\t}]\n' +
          '}, {\n' +
          '\t"label": "多条数据",\n' +
          '\t"firstNode": true,\n' +
          '\t"children": [{\n' +
          '\t\t"label": "二级标题3(多条)",\n' +
          '\t\t"resultType": 2,\n' +
          '\t\t"dataSetCode": "code3",\n' +
          '\t\t"key": "key3"\n' +
          '\t}]\n' +
          '}]',
      tableJson: '{\n' +
          '\t"data": {\n' +
          '\t\t"tdData": [\n' +
          '\t\t\t[{\n' +
          '\t\t\t\t"val": "值(二级标题(单条))",\n' +
          '\t\t\t\t"rowspan": 1,\n' +
          '\t\t\t\t"colspan": 1,\n' +
          '\t\t\t\t"key": "key1",\n' +
          '\t\t\t\t"cellType": "text",\n' +
          '\t\t\t\t"label": "二级标题(单条)",\n' +
          '\t\t\t\t"otherVal": "",\n' +
          '\t\t\t\t"otherSelect": false,\n' +
          '\t\t\t\t"isRemove": false,\n' +
          '\t\t\t\t"isEditCell": false,\n' +
          '\t\t\t\t"size": "中",\n' +
          '\t\t\t\t"isColorChange": false,\n' +
          '\t\t\t\t"color": "rgba(20, 0, 0, 1)",\n' +
          '\t\t\t\t"isWeight": false,\n' +
          '\t\t\t\t"isItalic": false,\n' +
          '\t\t\t\t"underline": false,\n' +
          '\t\t\t\t"align": "中",\n' +
          '\t\t\t\t"valign": "中",\n' +
          '\t\t\t\t"cellFill": "rgba(254, 254, 254, 1)",\n' +
          '\t\t\t\t"topBorderColor": "",\n' +
          '\t\t\t\t"bottomBorderColor": "",\n' +
          '\t\t\t\t"leftBorderColor": "",\n' +
          '\t\t\t\t"rightBorderColor": "",\n' +
          '\t\t\t\t"isShow": true,\n' +
          '\t\t\t\t"selectFlag": "td-0-0-1-1",\n' +
          '\t\t\t\t"tag": "td",\n' +
          '\t\t\t\t"deleteBit": false,\n' +
          '\t\t\t\t"usedFlag": 1,\n' +
          '\t\t\t\t"dataSetCode": "code1",\n' +
          '\t\t\t\t"dataSetName": "单条数据-二级标题(单条)",\n' +
          '\t\t\t\t"resultType": 1,\n' +
          '\t\t\t\t"displayOrder": 0\n' +
          '\t\t\t}, {\n' +
          '\t\t\t\t"val": "值(二级标题2(单条))",\n' +
          '\t\t\t\t"rowspan": 1,\n' +
          '\t\t\t\t"colspan": 1,\n' +
          '\t\t\t\t"key": "key2",\n' +
          '\t\t\t\t"cellType": "text",\n' +
          '\t\t\t\t"label": "二级标题2(单条)",\n' +
          '\t\t\t\t"otherVal": "",\n' +
          '\t\t\t\t"otherSelect": false,\n' +
          '\t\t\t\t"isRemove": false,\n' +
          '\t\t\t\t"isEditCell": false,\n' +
          '\t\t\t\t"size": "中",\n' +
          '\t\t\t\t"isColorChange": false,\n' +
          '\t\t\t\t"color": "rgba(20, 0, 0, 1)",\n' +
          '\t\t\t\t"isWeight": false,\n' +
          '\t\t\t\t"isItalic": false,\n' +
          '\t\t\t\t"underline": false,\n' +
          '\t\t\t\t"align": "中",\n' +
          '\t\t\t\t"valign": "中",\n' +
          '\t\t\t\t"cellFill": "rgba(254, 254, 254, 1)",\n' +
          '\t\t\t\t"topBorderColor": "",\n' +
          '\t\t\t\t"bottomBorderColor": "",\n' +
          '\t\t\t\t"leftBorderColor": "",\n' +
          '\t\t\t\t"rightBorderColor": "",\n' +
          '\t\t\t\t"isShow": true,\n' +
          '\t\t\t\t"selectFlag": "td-0-1-1-1",\n' +
          '\t\t\t\t"tag": "td",\n' +
          '\t\t\t\t"deleteBit": false,\n' +
          '\t\t\t\t"exitsMapping": true,\n' +
          '\t\t\t\t"usedFlag": true,\n' +
          '\t\t\t\t"dataSetCode": "code2",\n' +
          '\t\t\t\t"dataSetName": "单条数据-二级标题2(单条)",\n' +
          '\t\t\t\t"resultType": 1,\n' +
          '\t\t\t\t"displayOrder": 0\n' +
          '\t\t\t}, {\n' +
          '\t\t\t\t"val": "手写内容",\n' +
          '\t\t\t\t"rowspan": 1,\n' +
          '\t\t\t\t"colspan": 1,\n' +
          '\t\t\t\t"cellType": "text",\n' +
          '\t\t\t\t"otherVal": "",\n' +
          '\t\t\t\t"otherSelect": "",\n' +
          '\t\t\t\t"isRemove": false,\n' +
          '\t\t\t\t"isEditCell": false,\n' +
          '\t\t\t\t"size": "中",\n' +
          '\t\t\t\t"isColorChange": false,\n' +
          '\t\t\t\t"color": "rgba(20, 0, 0, 1)",\n' +
          '\t\t\t\t"isWeight": false,\n' +
          '\t\t\t\t"isItalic": false,\n' +
          '\t\t\t\t"underline": false,\n' +
          '\t\t\t\t"align": "中",\n' +
          '\t\t\t\t"valign": "中",\n' +
          '\t\t\t\t"cellFill": "rgba(255, 255, 255, 0)",\n' +
          '\t\t\t\t"topBorderColor": "",\n' +
          '\t\t\t\t"bottomBorderColor": "",\n' +
          '\t\t\t\t"leftBorderColor": "",\n' +
          '\t\t\t\t"rightBorderColor": "",\n' +
          '\t\t\t\t"isShow": true,\n' +
          '\t\t\t\t"selectFlag": "td-0-2-1-1",\n' +
          '\t\t\t\t"displayOrder": 0\n' +
          '\t\t\t}]\n' +
          '\t\t]\n' +
          '\t},\n' +
          '\t"options": {\n' +
          '\t\t"color": "rgba(22, 91, 147, 1)",\n' +
          '\t\t"headRowNum": 0,\n' +
          '\t\t"bodyRowNum": 1,\n' +
          '\t\t"colNum": 3,\n' +
          '\t\t"rowMax": 50,\n' +
          '\t\t"colMax": 50,\n' +
          '\t\t"headerFill": "#F9FAFB",\n' +
          '\t\t"cellFill": "rgba(255, 255, 255, 0)",\n' +
          '\t\t"rowBorderColor": "rgba(37,58,101,1)",\n' +
          '\t\t"colBorderColor": "rgba(37,58,101,1)",\n' +
          '\t\t"heightAdaptive": false,\n' +
          '\t\t"isSelect": true,\n' +
          '\t\t"isPage": false,\n' +
          '\t\t"isFirstCreat": false,\n' +
          '\t\t"isRowTotal": false,\n' +
          '\t\t"isColTotal": false,\n' +
          '\t\t"borderSize": "1",\n' +
          '\t\t"configMode": "custom",\n' +
          '\t\t"changeKey": ["color"]\n' +
          '\t}\n' +
          '}'
    }
  },
  methods: {
    // 组件初始化
    componentInit() {
      this.$nextTick(() => {
        this.$refs.design.componentInit(this.dataTreeJson, this.tableJson)
      })
    },
    // 获取表格json
    getTableJSON() {
      this.$nextTick(() => {
        this.tableJson = this.$refs.design.getTableJSON()
      })
    },
    // 初始化表格
    initTable() {
      this.$nextTick(() => {
        this.$refs.render.initTable(this.tableJson)
      })
    },
    // 刷新数据
    refreshData() {
      const singleDataMap = JSON.parse(this.singleDataMapJson)
      const multipleDataArray = JSON.parse(this.multipleDataArrayJson)
      this.$nextTick(() => {
        this.$refs.render.refreshData(multipleDataArray, singleDataMap)
      })
    }
  }
}
</script>

<style scoped>

</style>
